<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文章管理 - Echo Network</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
            color: #333;
        }
        .navbar {
            background-color: #2c3e50;
            color: white;
            padding: 15px 0;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        .navbar-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .navbar-logo {
            font-size: 1.5rem;
            font-weight: bold;
            color: white;
            text-decoration: none;
        }
        .navbar-menu {
            display: flex;
            list-style: none;
            margin: 0;
            padding: 0;
        }
        .navbar-menu li {
            margin-left: 20px;
        }
        .navbar-menu a {
            color: white;
            text-decoration: none;
            padding: 8px 12px;
            border-radius: 4px;
            transition: background-color 0.2s;
        }
        .navbar-menu a:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 100px 20px 40px;
        }
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        h1 {
            font-size: 2rem;
            color: #2c3e50;
            margin: 0;
        }
        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.2s;
            text-decoration: none;
            display: inline-block;
            text-align: center;
        }
        .btn-primary {
            background-color: #3498db;
            color: white;
        }
        .btn-primary:hover {
            background-color: #2980b9;
        }
        .btn-info {
            background-color: #17a2b8;
            color: white;
        }
        .btn-info:hover {
            background-color: #138496;
        }
        .btn-danger {
            background-color: #e74c3c;
            color: white;
        }
        .btn-danger:hover {
            background-color: #c0392b;
        }
        .card {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
            margin-bottom: 20px;
        }
        .table-responsive {
            overflow-x: auto;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        th {
            background-color: #f8f9fa;
            font-weight: 600;
            color: #2c3e50;
        }
        tr:hover {
            background-color: #f8f9fa;
        }
        .message {
            padding: 15px;
            margin-bottom: 20px;
            border-radius: 4px;
        }
        .message-success {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .message-error {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        .no-data {
            text-align: center;
            padding: 40px;
            color: #7f8c8d;
        }
        .action-buttons {
            display: flex;
            gap: 8px;
        }
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1001;
            justify-content: center;
            align-items: center;
        }
        .modal-content {
            background-color: white;
            border-radius: 8px;
            padding: 30px;
            width: 90%;
            max-width: 500px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #ddd;
        }
        .modal-title {
            font-size: 1.5rem;
            margin: 0;
            color: #2c3e50;
        }
        .close {
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: #7f8c8d;
        }
        .close:hover {
            color: #2c3e50;
        }
        .modal-footer {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 20px;
            padding-top: 15px;
            border-top: 1px solid #ddd;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-control {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="navbar-container">
            <a href="/admin/categoryList.html" class="navbar-logo">Echo Network 管理后台</a>
            <ul class="navbar-menu">
                <li><a href="/echo-network/article-list">前台首页</a></li>
                <li><a href="/echo-network/profile-show">个人中心</a></li>
            </ul>
        </div>
    </nav>
    
    <div class="container">
        <div class="header">
            <h1>文章管理</h1>
        </div>

        <!-- 消息提示 -->
        <div th:if="${message != null}" class="message" th:classappend="${messageType == 'success' ? 'message-success' : 'message-error'}">
            <span th:text="${message}"></span>
        </div>

        <!-- 分类筛选 -->
        <div class="card">
            <h3 style="margin-top: 0; color: #2c3e50;">分类筛选</h3>
            <form id="filterForm" method="get" action="articleList.html">
                <div class="form-group">
                    <label for="categoryId">选择分类：</label>
                    <select id="categoryId" name="categoryId" class="form-control">
                        <option value="0">全部分类</option>
                        <option th:each="category : ${categories}" 
                                th:value="${category.categoryId}" 
                                th:text="${category.categoryName}" 
                                th:selected="${selectedCategoryId != null && selectedCategoryId == category.categoryId}">
                        </option>
                    </select>
                </div>
                <button type="submit" class="btn btn-primary">筛选</button>
            </form>
        </div>

        <!-- 文章列表 -->
        <div class="card">
            <div class="table-responsive">
                <table>
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>标题</th>
                            <th>作者</th>
                            <th>发布时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr th:each="article, stat : ${articles}">
                            <td th:text="${stat.count}"></td>
                            <td th:text="${article.title}"></td>
                            <td th:text="${article.authorUsername}"></td>
                            <td th:text="${article.createTime}"></td>
                            <td>
                                <div class="action-buttons">
                                    <a th:href="'/echo-network/article-detail?id=' + ${article.id}" target="_blank" class="btn btn-info" style="padding: 5px 10px; font-size: 12px;">查看</a>
                                    <button type="button" class="btn btn-danger delete-btn" th:attr="data-id=${article.id}" style="padding: 5px 10px; font-size: 12px;">删除</button>
                                </div>
                            </td>
                        </tr>
                        <tr th:if="${articles == null || articles.size() == 0}">
                            <td colspan="5" class="no-data">暂无文章</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- 确认删除模态框 -->
    <div id="deleteConfirmModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">确认删除</h3>
                <button type="button" class="close" id="closeDeleteModalBtn">&times;</button>
            </div>
            <div class="modal-body">
                <p>确定要删除这篇文章吗？此操作不可撤销。</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="cancelDelete">取消</button>
                <button type="button" class="btn btn-danger" id="confirmDeleteBtn">确认删除</button>
            </div>
        </div>
    </div>

    <script>
        // 当前选中的文章ID
        let currentArticleId = null;
        
        // 获取模态框元素
        const deleteModal = document.getElementById('deleteConfirmModal');
        const closeDeleteModalBtn = document.getElementById('closeDeleteModalBtn');
        const cancelDeleteBtn = document.getElementById('cancelDelete');
        const confirmDeleteBtn = document.getElementById('confirmDeleteBtn');
        
        // 处理删除按钮点击事件
        document.querySelectorAll('.delete-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                currentArticleId = this.getAttribute('data-id');
                deleteModal.style.display = 'flex';
            });
        });
        
        // 关闭模态框
        function closeModal() {
            deleteModal.style.display = 'none';
            currentArticleId = null;
        }
        
        closeDeleteModalBtn.addEventListener('click', closeModal);
        cancelDeleteBtn.addEventListener('click', closeModal);
        
        // 点击模态框外部关闭
        window.addEventListener('click', function(event) {
            if (event.target === deleteModal) {
                closeModal();
            }
        });
        
        // 确认删除按钮点击事件
        confirmDeleteBtn.addEventListener('click', function() {
            if (currentArticleId) {
                // 获取当前筛选条件
                var categoryId = document.getElementById('categoryId').value;
                
                // 构建删除请求URL
                var deleteUrl = 'articleList.html?action=delete&id=' + currentArticleId;
                if (categoryId && categoryId != '0') {
                    deleteUrl += '&categoryId=' + categoryId;
                }
                
                // 发送删除请求
                window.location.href = deleteUrl;
            }
        });
    </script>
</body>
</html>